<template>
<!-- 列表组 -->
  <ul class="list-group">
    <li v-for="item in list" :key="item.id"
      class="list-group-item d-flex justify-content-between align-items-center">
      <!-- 复选框 -->
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done" />
        <label class="custom-control-label" :class="item.done ? 'delete' : ''"  :for="item.id">{{ item.task }}</label>
      </div>
      <!-- 徽标 -->
      <span class="badge badge-success badge-pill" v-if="item.done" >完成</span>
      <span class="badge badge-warning badge-pill" v-else >未完成</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TodoList',
  data(){
    return {
        
    }
  },
  props:{
    list:{
        type:Array,
        required:true,
        default:[]
    }
  }
}
</script>

<style lang="less" scoped>
// 为列表设置固定款单
.list-group{
    width: 360px;
}

// 删除效果
.delete {
    text-decoration: line-through;
    color: gray;
    font-style: italic;
}
</style>